<template>
  <div class="login">
    <el-row :gutter="20">
      <el-col :span="9" :offset="7">
        <span class="title">登录页面</span>
        <div class="grid-content bg-purple">
          <br>
          <br>
          <br>
          <span>手机号:</span>
          <el-input v-model="user" placeholder="请输入手机号"></el-input>
          <br>
          <br>
          <span>密码:</span>
          <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
          <br>
          <br>
          <div class="but">
            <el-button type="danger" round @click="to_reg">去注册</el-button>
            <el-button type="success" round @click="to_login">登录</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "login",
    data() {
          return{
            user : '',
            pwd : '',
          }
      },
    methods: {
          to_login() {
            this.$axios({
                    url: 'http://127.0.0.1:8000/login/',
                    method: 'post',
                    data: {
                        mobile: this.user,
                        password: this.pwd,
                    }
                }).then(response => {
                  if (response.data.status === 200) {
                        this.$message({
                            message: '登录成功',
                            type: 'success',
                            duration: 1000,
                        });
                        this.$cookies.set('username', response.data.username, '7d');

                        setTimeout(() =>{
                            this.$router.push('/goods');
                            window.location.reload()
                        },1000);




                    }
            }).catch((error) =>{
              this.$message({
                        message: '手机号不存在或密码错误',
                        type: 'warning',
                        duration: 1000,
                    });
            })
          },
          to_reg() {
            this.$router.push('/register')
          }
      }
  }
</script>

<style scoped>
 .login{
   margin-top: 50px;

 }
  input {
    width: 200px;
    display: block;
  }

  .title{
    font-size: 30px;
   margin-left: 200px;
  }

  .but{
    float: right;
  }
</style>
